<template>
  <div class="table_page">
    <el-table
      :data="tableData"
      @selection-change="selectionChange"
      v-loading="isload"
      :stripe = "stripe"
      :row-class-name="rowClassName"
      @row-click="handleRowClick">
      <slot name="table_column"></slot>
    </el-table>
    <slot name="handleoperation"></slot>
  </div>
</template>

<script>

export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    currentPage: {
      type: Number,
      default: 1
    },
    totalPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    isload:{
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
  },
  methods: {
    selectionChange (selection) {
      this.$emit('table-checked', selection);
    },
    currentChange (currentPage) {
      this.$emit('changePage', currentPage);
    },
		handleRowClick (row) {
			this.$emit('row-click',row)
    },
    rowClassName ({row, rowIndex}) {
      if (rowIndex % 2 == 1) {
        return 'success-row';
      }
      return '';
    }
  }
};
</script>

<style lang="scss" scoped>
  .table_page {
    height:100%;
  }
  .table_page_number {
    margin-top: 20px;
    font-weight: normal;
    text-align: center;
  }
</style>
<style lang="scss">
  .table_page{
    .el-pagination__total, .el-pagination__jump {
      color: #c6c6c6;
    }
    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
      color: #c6c6c6;
      background: #636363;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background: #C08754;
    }
    .el-input__inner {
      background-color: rgba(255,255,255,0.01);
      color: #c6c6c6;
    }
    .el-pagination.is-background .el-pager li:not(.disabled):hover {
      color: #C08754;
    }
  }
</style>